Ext.require(['*']);

Ext.onReady(function() {
	Ext.get('loading').remove();
	Ext.QuickTips.init();

	Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));

	// tree
	var store = Ext.create('Ext.data.TreeStore', {
				autoLoad : true,
				proxy : {
					type : "ajax",
					url : "/mvn/resources/data/treeData.json"
				},
				root : {
					id : "",
					text : '根节点',
					expanded : true
				},
				listeners : {
					// 注意beforeload的参数。与3.x中的不同
					beforeload : function(ds, opration, opt) {
						opration.params.nodeid = opration.node.data.id;// 获得节点的相应属性，也有所不同
						opration.params.name = opration.node.data.text;
					}
				}
			});

	var tree = Ext.create('Ext.tree.Panel', {
				title : '树形菜单',
				width : 200,
				rootVisible : true,
				split : true,
				minSize : 175,
				maxSize : 400,
				iconCls : 'nav',
				store : store,
				frame:true,
				listeners : {
					itemclick : function(view, rec, el, index, e) {
						if(rec.get('leaf')){
							var pid = rec.get('id');
							var  a = pid.substring(0, pid.indexOf('-'))+ '_panel';
							Ext.getCmp('content-panel').layout.setActiveItem(a);
						}
					}
				}
			});// end tree

	var viewport = Ext.create('Ext.Viewport', {
		id : 'border-example',
		layout : 'border',
		items : [
				// create instance immediately
				Ext.create('Ext.Component', {
							region : 'north',
							height : 32, // give north and south regions a
							// height
							autoEl : {
								tag : 'div',
								html : '<p style="font-size:20px;font-weight:100;">' + sysInfo
										+ '</p>'
							}
						}), {
					// lazily created panel (xtype:'panel' is default)
					region : 'south',
					contentEl : 'south',
					split : true,
					height : 100,
					minSize : 100,
					maxSize : 200,
					collapsible : true,
					collapsed : true,
					title : '关于系统',
					margins : '0 0 0 0'
				}, {
					xtype : 'tabpanel',
					region : 'east',
					title : 'East Side',
					dockedItems : [{
								dock : 'top',
								xtype : 'toolbar',
								items : ['->', {
											xtype : 'button',
											text : 'test',
											tooltip : 'Test Button'
										}]
							}],
					animCollapse : true,
					collapsible : true,
					split : true,
					width : 225, // give east and west regions a width
					minSize : 175,
					maxSize : 400,
					margins : '0 5 0 0',
					activeTab : 1,
					tabPosition : 'bottom',
					items : [{
								html : '<p>A TabPanel component can be a region.</p>',
								title : 'A Tab',
								autoScroll : true
							}, Ext.create('Ext.grid.PropertyGrid', {
										title : 'Property Grid',
										closable : true,
										source : {
											"(name)" : "Properties Grid",
											"grouping" : false,
											"autoFitColumns" : true,
											"productionQuality" : false,
											"created" : Ext.Date.parse(
													'10/15/2006', 'm/d/Y'),
											"tested" : false,
											"version" : 0.01,
											"borderWidth" : 1
										}
									})]
				}, {
					region : 'west',
					stateId : 'navigation-panel',
					id : 'west-panel', // see Ext.getCmp() below
					title : currentUser,
					split : true,
					width : 200,
					minWidth : 175,
					maxWidth : 400,
					collapsible : true,
					animCollapse : true,
					margins : '0 0 0 5',
					bodyStyle : 'background-color:#DFE8F6',
					layout : 'accordion',
					items : [roleTreePanel,tree, {
								title : '设置',
								html : '<p>Some settings in here.</p>',
								iconCls : 'settings'
							}, {
								title : '预留选项',
								html : '<p>Some info in here.</p>',
								iconCls : 'info'
							}]
				},{
							region : 'center', 
							id : 'content-panel',
							layout : 'card',
							activeItem : 0,
							border : false,
							items : [welcome,ulist_panel,clist_panel]
						}]
	});
	// get a reference to the HTML element with id "hideit" and add a click
	// listener to it
//	Ext.get("hideit").on('click', function() {
//				// get a reference to the Panel that was created with id =
//				// 'west-panel'
//				var w = Ext.getCmp('west-panel');
//				// expand or collapse that Panel based on its collapsed property
//				// state
//				w.collapsed ? w.expand() : w.collapse();
//			});
});